<template>
  <div>
    <div>
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </div>
    <div>
      <div :style="{display: is1(this.active)}">
        <el-form label="left" label-position="left" label-width="80px">
          <h4>请填选以下内容：</h4>
        </el-form>
        <el-form label="left" label-position="left" label-width="80px">
          <el-form-item label="试卷：" style="width: 300px;">
            <el-input
              placeholder="请输入试卷名称"
              v-model="paperName"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="学科：" prop="sid" style="width: 300px;">
            <el-select v-model="form.sid" @change="change" placeholder="选择学科">
              <el-option v-for="item in subjectFilter" :key="item.sid" :value="item.sid"
                         :label="item.subName+' ( '+item.uid+' )'"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="知识点：" style="width: 300px;">
            <el-checkbox-group v-model="checkList">
              <el-checkbox v-for="(item,index) in points" :key="index" :label="item.pid" :value="item.pid">
                {{ item.point }}
              </el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="难度：" style="width: 300px;">
            <el-rate
              v-model="value"
              :colors="colors"
              style="line-height: 50px">
            </el-rate>
          </el-form-item>
        </el-form>
        <el-button style="margin-top: 12px;margin-left: 100px;" @click="next" :style="{display: isSubmit()}">下一步
        </el-button>
      </div>
      <div :style="{display: is2(this.active)}">
        <el-form label="left" label-position="left" label-width="80px">
          <h4>请选择组卷标准：</h4>
        </el-form>
        <el-form label="left" label-position="left" label-width="80px">
          <el-form-item label="标准：" style="width: 300px;">
            <el-select v-model="criterion.crid" placeholder="默认" @change="typeChange(criterion.crid)">
              <el-option :label="item.label" v-for="item in criterion" :key="item.crid" :value="item.crid"></el-option>
            </el-select>
          </el-form-item>
          <el-form label="left" label-position="left" label-width="80px">
            <h4>试卷题型预览：</h4>
          </el-form>
        </el-form>
        <el-form label="left" label-position="left" label-width="80px" :style="{display: isDefault()}">
          <h5>当前试卷总分数：{{this.defaultScore}}</h5>
          <el-form-item label="单选题：" style="width: 1000px;">
            <div style="float: left;">
              <el-input-number v-model="nums[0].defaultQuestionNum" :disabled="true"></el-input-number>
            </div>
            <div style="float: left;padding-left: 50px;width: 120px">
              <el-input type="number" v-model="nums[0].defaultQuestionScore" style="float: left;" placeholder="请输入分数" :disabled="true"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="多选题：" style="width: 1000px;">
            <div style="float: left;">
              <el-input-number v-model="nums[1].defaultQuestionNum" :disabled="true"></el-input-number>
            </div>
            <div style="float: left;padding-left: 50px;width: 120px">
              <el-input type="number" v-model="nums[1].defaultQuestionScore" style="float: left;" placeholder="请输入分数" :disabled="true"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="判断题：" style="width: 1000px;">
            <div style="float: left;">
              <el-input-number v-model="nums[3].defaultQuestionNum" :disabled="true"></el-input-number>
            </div>
            <div style="float: left;padding-left: 50px;width: 120px">
              <el-input v-model="nums[3].defaultQuestionScore" style="float: left;" placeholder="请输入分数" :disabled="true"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="填空题：" style="width: 1000px;">
            <div style="float: left;">
              <el-input-number v-model="nums[4].defaultQuestionNum" :disabled="true"></el-input-number>
            </div>
            <div style="float: left;padding-left: 50px;width: 120px">
              <el-input v-model="nums[4].defaultQuestionScore" style="float: left;" placeholder="请输入分数" :disabled="true"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="简答题：" style="width: 1000px;">
            <div style="float: left;">
              <el-input-number v-model="nums[2].defaultQuestionNum" :disabled="true"></el-input-number>
            </div>
            <div style="float: left;padding-left: 50px;width: 120px">
              <el-input v-model="nums[2].defaultQuestionScore" style="float: left;" placeholder="请输入分数" :disabled="true"></el-input>
            </div>
          </el-form-item>
        </el-form>
        <div :style="{display: isCustom()}">
          <h5>当前试卷总分数：{{this.score}}</h5>
          <el-form v-for="(item,index) in nums" :key="item.qid" label="left" label-position="left" label-width="80px">
            <el-form-item :value="item.qid" :label="item.label">
              <div style="float: left;">
                <el-input-number v-model="nums[index].questionNum" :min="0" :max="10"  @change="totalScores"></el-input-number>
              </div>
              <div style="float: left;padding-left: 50px;width: 120px">
                <el-input-number v-model="nums[index].questionScore" style="float: left;" placeholder="请输入分数" :min="0" controls-position="right" @change="totalScores"></el-input-number>
              </div>
            </el-form-item>
          </el-form>
        </div>
        <el-button style="margin-top: 12px;" @click="previous">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="onSubmit" :style="{display: offSubmit()}">生成试卷</el-button>
      </div>
      <div :style="{display: is3(this.active)}">
        <template>
          <el-table
            :default-sort="{prop: 'date', order: 'descending'}"
            :data="singleChoice"
            style="width: 100%">
            <el-table-column type="expand">
              <templat slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="题目序号">
                    <span>{{ props.row.order }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="题干">
                    <span v-html="props.row.stem "></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="选项:">
                  </el-form-item>
                  <br/>
                  <el-form-item label="A.">
                    <span v-html="props.row.options[0].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="B.">
                    <span v-html="props.row.options[1].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="C.">
                    <span v-html="props.row.options[2].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="D.">
                    <span v-html="props.row.options[3].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="答案">
                    <span>{{ props.row.answer }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="解析">
                    <span v-html="props.row.analysis"></span>
                  </el-form-item>
                  <br/>
                </el-form>
              </templat>
            </el-table-column>
            <el-table-column
              label="题型"
            >{{ this.questionType[0].label }}
            </el-table-column>
            <el-table-column
              label="题号"
              prop="order"
              sortable>
            </el-table-column>
            <el-table-column label="难度">
              <templat slot-scope="props">
                <el-rate v-model="props.row.difficulty" disabled></el-rate>
              </templat>
            </el-table-column>
            <el-table-column
              label="分值"
              prop="mark">
            </el-table-column>
          </el-table>
          <el-table
            :data="multipleChoice"
            style="width: 100%">
            <el-table-column type="expand">
              <templat slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="题号">
                    <span>{{ props.row.order }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="题干">
                    <span v-html="props.row.stem "></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="选项:">
                  </el-form-item>
                  <br/>
                  <el-form-item label="A.">
                    <span v-html="props.row.options[0].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="B.">
                    <span v-html="props.row.options[1].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="C.">
                    <span v-html="props.row.options[2].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="D.">
                    <span v-html="props.row.options[3].content"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="答案">
                    <span>{{ props.row.answers[0] }}</span>
                    <span>{{ props.row.answers[1] }}</span>
                    <span>{{ props.row.answers[3] }}</span>
                    <span>{{ props.row.answers[4] }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="解析">
                    <span v-html="props.row.analysis"></span>
                  </el-form-item>
                  <br/>
                </el-form>
              </templat>
            </el-table-column>
            <el-table-column
              label="题型"
            >{{ this.questionType[1].label }}
            </el-table-column>
            <el-table-column
              label="题号"
              prop="order"
              sortable>
            </el-table-column>
            <el-table-column label="难度">
              <templat slot-scope="props">
                <el-rate v-model="props.row.difficulty" disabled></el-rate>
              </templat>
            </el-table-column>
            <el-table-column
              label="分值"
              prop="mark">
            </el-table-column>
          </el-table>
          <el-table
            :data="judgment"
            style="width: 100%">
            <el-table-column type="expand">
              <templat slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="题号">
                    <span>{{ props.row.order }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="题干">
                    <span v-html="props.row.stem "></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="答案">
                    <span>{{ props.row.answer }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="解析">
                    <span v-html="props.row.analysis"></span>
                  </el-form-item>
                  <br/>
                </el-form>
              </templat>
            </el-table-column>
            <el-table-column
              label="题型"
            >{{ this.questionType[2].label }}
            </el-table-column>
            <el-table-column
              label="题号"
              prop="order"
              sortable>
            </el-table-column>
            <el-table-column label="难度">
              <templat slot-scope="props">
                <el-rate v-model="props.row.difficulty" disabled></el-rate>
              </templat>
            </el-table-column>
            <el-table-column
              label="分值"
              prop="mark">
            </el-table-column>
          </el-table>
          <el-table
            :data="fillTheBlanks"
            style="width: 100%">
            <el-table-column type="expand">
              <templat slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="题号">
                    <span>{{ props.row.order }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="题干">
                    <span v-html="props.row.stem "></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="答案">
                    <span>{{ props.row.answers[0].answer }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="解析">
                    <span v-html="props.row.analysis"></span>
                  </el-form-item>
                  <br/>
                </el-form>
              </templat>
            </el-table-column>
            <el-table-column
              label="题型"
            >{{ this.questionType[3].label }}
            </el-table-column>
            <el-table-column
              label="题号"
              prop="order"
              sortable>
            </el-table-column>
            <el-table-column label="难度">
              <templat slot-scope="props">
                <el-rate v-model="props.row.difficulty" disabled></el-rate>
              </templat>
            </el-table-column>
            <el-table-column
              label="分值"
              prop="mark">
            </el-table-column>
          </el-table>
          <el-table
            :data="shortAnswer"
            style="width: 100%">
            <el-table-column type="expand">
              <templat slot-scope="props">
                <el-form label-position="left" inline class="demo-table-expand">
                  <el-form-item label="题号">
                    <span>{{ props.row.order }}</span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="题干">
                    <span v-html="props.row.stem "></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="答案">
                    <span v-html="props.row.answer"></span>
                  </el-form-item>
                  <br/>
                  <el-form-item label="解析">
                    <span v-html="props.row.analysis"></span>
                  </el-form-item>
                  <br/>
                </el-form>
              </templat>
            </el-table-column>
            <el-table-column
              label="题型"
            >{{ this.questionType[4].label }}
            </el-table-column>
            <el-table-column
              label="题号"
              prop="order"
              sortable>
            </el-table-column>
            <el-table-column label="难度">
              <templat slot-scope="props">
                <el-rate v-model="props.row.difficulty" disabled></el-rate>
              </templat>
            </el-table-column>
            <el-table-column
              label="分值"
              prop="mark">
            </el-table-column>
          </el-table>
        </template>
        <el-button style="margin-top: 12px;" @click="previous">上一步</el-button>
        <el-button style="margin-top: 12px;" @click="submitPaper">添加试卷</el-button>
      </div>
      <div style="text-align: center">
        <div :style="{display: is4(this.active)}">
          <el-row>
            <el-col :sm="12" :lg="6">
              <el-result icon="success" title="添加成功" subTitle="请到考试管理-试卷信息查看">
                <template slot="extra">
                  <el-button @click="returnHome" type="primary" size="medium">返回首页</el-button>
                  <el-button @click="addOne" type="primary" size="medium">重新添加</el-button>
                </template>
              </el-result>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {getCourse, getKnowledge, postPaper, postTest} from "../../api/data";

let paperMessage;
export default {
  name: "aiTestPaper",
  data() {
    return {
      active: 0,
      paperName: '',//试卷名称
      criterion: [ //组卷的标准,0为默认，1为自定义
        {
          crid: 0,
          label: '默认'
        },
        {
          crid: 1,
          label: '自定义'
        }
      ],
      questionType: [//题型
        {
          label: '单选题'
        },
        {
          label: '多选题'
        },
        {
          label: '判断题'
        },
        {
          label: '填空题'
        },
        {
          label: '简答题'
        }
      ],
      isTrue: '',
      subjectFilter: [],
      form: {
        sid: null,  //课程号
        point: null,
        dynamicItem: [], //题型
      },
      points: [],
      checkList: [],  //知识点多选框
      value: null,  //设置难度
      rateValue: null,  //返回的题型难度
      testType: 0,
      colors: ['#99A9BF', '#F7BA2A', '#FF9900'],  //难度颜色
      score: 0,//试卷总分数
      defaultScore: 0,//默认试卷总分数
      nums: [
        {
          qid: 0,
          label: '单选题',
          defaultQuestionScore: 2,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 10
        },
        {
          qid: 1,
          label: '多选题',
          defaultQuestionScore: 2,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 5
        },
        {
          qid: 2,
          label: '简答题',
          defaultQuestionScore: 8,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 5
        },
        {
          qid: 3,
          label: '判断题',
          defaultQuestionScore: 2,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 5
        },
        {
          qid: 4,
          label: '填空题',
          defaultQuestionScore: 2,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 10
        },
        {
          qid: 5,
          label: '论述题',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 0
        },
        {
          qid: 6,
          label: '计算题',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 5
        },
        {
          qid: 7,
          label: '资料题',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 0
        },
        {
          qid: 8,
          label: '排序题',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 0
        },
        {
          qid: 9,
          label: '完形填空',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 0
        },
        {
          qid: 10,
          label: '阅读理解',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 0
        },
        {
          qid: 11,
          label: '综合题',
          defaultQuestionScore: 0,
          questionScore: 0,
          questionNum: 0,
          defaultQuestionNum: 0
        }
      ],
      activeNames: ['1'],
      paperMessage: [], //试卷信息
      singleChoice: [],//单选题解析
      multipleChoice: [],//多选题解析
      judgment: [],//判断题解析
      shortAnswer: [],//简答题解析
      fillTheBlanks: [],//填空题解析
    };
  },

  methods: {
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    previous() {
      if (this.active > 0) {
        this.active--;
      }
    },
    is1(index) {
      if (index === 0) {
        return '';
      } else {
        return 'none';
      }
    },
    is2(index) {
      if (index === 1) {
        return '';
      } else {
        return 'none';
      }
    },
    is3(index) {
      if (index === 2) {
        return '';
      } else {
        return 'none';
      }
    },
    is4(index) {
      if (index === 3) {
        return '';
      } else {
        return 'none';
      }
    },
    isDefault() {
      if (this.criterion.crid === 1) {
        return 'none';
      } else {
        return ''
      }
    },
    isCustom() {
      if (this.criterion.crid === 1) {
        return '';
      } else {
        return 'none'
      }
    },
    change() {
      getKnowledge({
        sid: this.form.sid
      }).then(res => {
        this.points = res.data;
      })
    },
    onSubmit() {
      let data = {
        sid: this.form.sid,
        points: this.checkList,
        difficulty: this.value,
        nums: this.nums,
        testType: this.testType,
        score: this.score,
        defaultScore: this.defaultScore
      };
      console.log(JSON.stringify(data))
      postTest(JSON.stringify(data)).then((params) => {
        this.paperMessage = JSON.stringify(params.data.data);
        this.singleChoice = params.data.data.singleChoice;
        this.multipleChoice = params.data.data.multipleChoice;
        this.judgment = params.data.data.judgment;
        this.shortAnswer = params.data.data.shortAnswer;
        this.fillTheBlanks = params.data.data.fillTheBlanks;
        if (this.active++ > 2) this.active = 0;
        console.log("试卷已生成!")
      })
    },
    isSubmit() {
      if (this.active === 1) {
        return 'none';
      } else {
        return '';
      }
    },
    offSubmit() {
      if (this.active !== 1) {
        return 'none';
      } else {
        return '';
      }
    },
    typeChange(index) {
      this.testType = index;
    },
    handleChange(val) {
      console.log(val);
    },
    returnHome() { //按钮返回首页
      this.$router.replace('/Home');
    },
    addOne() {//重新添加
      this.active = 0;
    },
    submitPaper() {
      this.next();
      let paper = {
        paperName: this.paperName,
        sid: this.form.sid,
        points: this.checkList,
        paperMessage: this.paperMessage
      };
      postPaper(JSON.stringify(paper)).then(() => {
        console.log("试卷已提交!")
      })
    },
    totalDefaultScores(){
      let scores=0;
      scores=this.nums[0].defaultQuestionScore*this.nums[0].defaultQuestionNum
          +this.nums[1].defaultQuestionScore*this.nums[1].defaultQuestionNum
          +this.nums[2].defaultQuestionScore*this.nums[2].defaultQuestionNum
          +this.nums[3].defaultQuestionScore*this.nums[3].defaultQuestionNum
          +this.nums[4].defaultQuestionScore*this.nums[4].defaultQuestionNum;
      this.defaultScore=scores;
    },
    totalScores(){
      let scores=0;
      scores=this.nums[0].questionScore*this.nums[0].questionNum
          +this.nums[1].questionScore*this.nums[1].questionNum
          +this.nums[2].questionScore*this.nums[2].questionNum
          +this.nums[3].questionScore*this.nums[3].questionNum
          +this.nums[4].questionScore*this.nums[4].questionNum
          +this.nums[5].questionScore*this.nums[5].questionNum
          +this.nums[6].questionScore*this.nums[6].questionNum
          +this.nums[7].questionScore*this.nums[7].questionNum
          +this.nums[8].questionScore*this.nums[8].questionNum
          +this.nums[9].questionScore*this.nums[9].questionNum
          +this.nums[10].questionScore*this.nums[10].questionNum
          +this.nums[11].questionScore*this.nums[11].questionNum;
      this.score=scores;
    }
  },
  mounted() {
    getCourse().then(res => {
      this.subjectFilter = res.data;
    })
    this.totalDefaultScores();
    this.totalScores();
  }
}
</script>

<style lang="less" scoped>
#nprogress .bar {
  background: green !important;
  height: 40px !important;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand  label {
  width: 90px;
  color: #99a9bf;
}

.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}

.el-input{
  display: flex;
}
</style>
